<template>
  <div>
    <h2>展示员工信息</h2>
    <table>
      <tr>
        <td>id</td>
        <td>用户名</td>
        <td>所属部门</td>
        <td>用户权限</td>
      </tr>
      <tr v-for="i in users" :key="i.id">
        <td>{{i.id}}</td>
        <td>{{i.username}}</td>
        <td>{{i.dept}}</td>
        <td v-if="i.authority==1">
          <router-link to="/Adduser">添加员工</router-link>
          <router-link to="/AddDepartment">添加部门</router-link>
        </td>
      </tr>
    </table>
    <button @click="pagx(p-1)">上一页</button>
    <button v-for="i in page" :key="i" @click="pagx(i)">{{i}}</button>
    <button @click="pagx(p+1)">下一页</button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      users:[],
      page:[],
      p:1,
      previous:false,
      next:false
    }
  },
  mounted(){
    this.common();
  },
  methods:{
    common(){
      this.axios({
        url:'http://127.0.0.1:8000/app01/user/',
        method:'get',
        data:{p:this.p}
      }).then(res=>{
        this.users=res.data.data;
        this.page=res.data.page;
        this.previous=res.data.previous;
        this.next=res.data.next;
      })
    },
    pagx:function(p){
      this.p=p;
      this.common();
    }
  }
}
</script>

<style>
*{
  margin: 0 auto;
}
table,tr,td{
  border: solid brown 1px;
  border-collapse: collapse;
}
table{
  width: 350px;
  height: 200px;
}
td{
  width: 80px;
}

</style>
